<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent class="demo-form-inline" id="searchBox">
            <el-form-item prop="orderNo">
            	<el-input v-model="searchForm.orderNo" clearable placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item prop="placeOrderTime">
              <el-date-picker v-model="placeOrderTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="下单开始日期" end-placeholder="下单结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="successOrderTime">
              <el-date-picker v-model="successOrderTime" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="完成开始日期" end-placeholder="完成结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>

            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="actionBtn" ref="actionBtn">
          <div class="actionBtnLeft">
            <div class="d-flex align-center" style="height: 32px;"> 手机号为 <span class="red"> {{userPhone}} ({{userLevelName}}) </span> 的订单明细</div>


          </div>
          <div class="actionBtnRight">
              <MyRefresh></MyRefresh>
             <!-- <MyTableColumnSet :tableColumn.sync="tableColumn" :hideTableColumn.sync="hideTableColumn" :tableColumnType.sync="tableColumnType"></MyTableColumnSet> -->
          </div>
        </div>

        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%;"  border :height="tableHeight" stripe v-loading="loading">
            <el-table-column prop="orderNo" label="订单号" v-if="!hideTableColumn.includes('telephone')" align="center" width="200"></el-table-column>
            <el-table-column prop="orderTypeName" label="订单类型" v-if="!hideTableColumn.includes('nickname')" align="center" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="orderTotal" label="订单总金额(元)" v-if="!hideTableColumn.includes('memberLevelName')" align="center" width="150"></el-table-column>
            <el-table-column prop="couponAmount" label="消费券使用金额(元)" v-if="!hideTableColumn.includes('totalCoupon')" align="center" width="170"></el-table-column>
            <el-table-column prop="otherPreferentialAmount" label="其他优惠金额(元)" v-if="!hideTableColumn.includes('usableCoupon')" align="center" width="170"></el-table-column>
            <el-table-column prop="actualPayPrice" label="实付金额(元)" v-if="!hideTableColumn.includes('firstCreateOrderTime')" align="center" width="160"></el-table-column>
            <el-table-column prop="superiorCommissionAmount" label="上级提成金额(元)" v-if="!hideTableColumn.includes('orderCount')" align="center" width="160"></el-table-column>
            <el-table-column prop="orderTime" label="下单日期" v-if="!hideTableColumn.includes('orderTotal')" align="center" width="150"></el-table-column>
            <el-table-column prop="completeTime" label="完成日期" v-if="!hideTableColumn.includes('orderCompleteCount')" align="center" width="150"></el-table-column>
            <el-table-column prop="statusName" label="订单状态" v-if="!hideTableColumn.includes('orderCompleteTotal')" align="center" width="150"></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-s-order"
                  @click="handleOrderDetail(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>


          </el-table>
        </div>
        <div class="page" ref="page">
           <MyPagination
             :total="total"
             :page.sync="searchForm.pageNum"
             :limit.sync="searchForm.pageSize"
             @pagination="dataInfo"
           />
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import common from '@/api/api';
  import option from '../../../common/option.js';
  import {
    orderItemList
  } from '@/api/getData'
  export default {
    data() {
      return {
        loading: false,
        btnLoading: false,
        userPhone:'',
        userLevelName:'',
        placeOrderTime:[],
        successOrderTime:[],
        searchForm: {
          customerId:'',
          orderNo:'',
          pageNum: 1,
          pageSize: 20,
        },
        total: 0,
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dataList:[],

        multipleSelection: '',
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.searchForm.customerId = this.$route.query.customerId;
      this.userPhone = this.$route.query.phone;
      this.userLevelName = this.$route.query.levelName;
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight - this.$refs.actionBtn.offsetHeight - this.$refs.page.offsetHeight - 55;
      })
    },
    methods: {
      handleOrderDetail(row){
         this.$router.push({path:'/order/orderDetail',query:{id:row.orderId}});
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.placeOrderTime, 'orderStartTime', 'orderEndTime');
          data = this.addDateRange(this.searchForm, this.successOrderTime, 'completeStartTime', 'completeEndTime');
          this.loading = true;
          const result = await orderItemList(data);
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

      handleSearch() {
        this.searchForm.pageNum= 1;
        this.dataInfo();
      },
      resetSearch(){
        this.resetForm('searchForm');
        this.placeOrderTime = [];
        this.successOrderTime = [];
        this.searchForm.pageNum = 1;
        this.dataInfo();
      },
      /** 表格选中状态改变 **/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

    }
  }
</script>

<style scoped lang="scss">

  .title{
    text-align: center;
    margin:5px 0;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }

</style>
